<template>

    <section>
        <!--产品详情查看-->
        <div>
            <el-col :span="16" :push="1" class="toolbar" style="padding-bottom: 0px; ">

                <!--<el-form label-width="140px"
                         class="demo-fundProduct">
                    <div class="product-row">
                        <el-col :span="20" :push="1">

                            <el-form-item label="产品类型:">
                                <el-select v-model="productType" size="18px" @change="resetValid">
                                    <el-option :key="value" :label="txt" :value="value"
                                               v-for="(txt, value) in options.contract_type"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </div>
                </el-form>-->

                <el-form v-if="productType != 4" :model="partProduct">
                    <el-form-item label="产品名称：" :label-width="dialog.formLabelWidth">
                        <span>{{ partProduct.product_name }}</span>
                    </el-form-item>
                    <el-form-item label="投资期限：" :label-width="dialog.formLabelWidth">
                        <span>{{ formatInvestmentPeriod(partProduct.investment_period) }}</span>
                    </el-form-item>
                    <el-form-item label="预期收益率：" :label-width="dialog.formLabelWidth">
                        <span>{{ partProduct.expected_earnings + "%"}}</span>
                    </el-form-item>
                    <el-form-item label="最低投资额：" :label-width="dialog.formLabelWidth">
                        <span>{{ partProduct.minimum_investment_amount + "元" }}</span>
                    </el-form-item>
                    <el-form-item label="客户返还收益方式：" :label-width="dialog.formLabelWidth">
                        <span>{{ formatIncomeReturnType(partProduct.income_return_type) }}</span>
                    </el-form-item>
                </el-form>

                <el-form v-if="productType == 4" :model="fundProduct" :label-width="dialog.formLabelWidth">
                    <el-form-item label="产品名称：">
                        <span>{{ fundProduct.product_name }}</span>
                    </el-form-item>
                    <el-form-item label="基金管理人：" :label-width="dialog.formLabelWidth">
                        <span>{{ fundProduct.fund_supervision_manager }}</span>
                    </el-form-item>
                    <el-form-item label="资产托管人：" :label-width="dialog.formLabelWidth">
                        <span>{{ fundProduct.asset_manager }}</span>
                    </el-form-item>
                    <el-form-item label="协会备案编号：" :label-width="dialog.formLabelWidth">
                        <span>{{ fundProduct.association_no }}</span>
                    </el-form-item>
                    <el-form-item label="基金期限：" :label-width="dialog.formLabelWidth">
                        <span>{{ fundProduct.fund_term }}</span>
                    </el-form-item>
                    <el-form-item label="运作方式：" :label-width="dialog.formLabelWidth">
                        <span>{{ fundProduct.manage_type }}</span>
                    </el-form-item>
                    <el-form-item label="基金经理：" :label-width="dialog.formLabelWidth">
                        <span>{{ fundProduct.fund_manager }}</span>
                    </el-form-item>
                    <el-form-item label="基金投向：" :label-width="dialog.formLabelWidth">
                        <span>{{ fundProduct.fund_investment }}</span>
                    </el-form-item>
                    <el-form-item label="业绩比较基准：" :label-width="dialog.formLabelWidth">
                        <span>{{ fundProduct.fund_benchmark }}</span>
                    </el-form-item>
                    <el-form-item label="管理人业绩报酬：" :label-width="dialog.formLabelWidth">
                        <span>{{ fundProduct.fund_manage_profit }}</span>
                    </el-form-item>
                    <el-form-item label="基金费率：" :label-width="dialog.formLabelWidth">
                        <span>{{ fundProduct.fund_rate }}</span>
                    </el-form-item>
                    <el-form-item label="募集账户：" :label-width="dialog.formLabelWidth">
                        <span>{{ fundProduct.raise_account }}</span>
                    </el-form-item>

                    <el-form-item label="附件信息：" :label-width="dialog.formLabelWidth">
                        <div v-for="(item) in fundProduct.attachment_info"><a target="_blank" :href="item.url">{{ item.name }}</a></div>
                    </el-form-item>
                </el-form>

                <el-col align="center">
                    <el-button @click="cancel">返回</el-button>
                </el-col>
            </el-col>




        </div>
    </section>
</template>

<script>
    import * as api from "../../api/product_api";
    import dict from "../../common/js/dict"

    export default {
        data() {
            return {
                productType: "",
                fundProduct: {
                    id: "",
                    type: "",
                    product_name: "",
                    fund_supervision_manager: "",
                    asset_manager: "",
                    association_no: "",
                    fund_term: "",
                    manage_type: "",
                    fund_manager: "",
                    fund_investment: "",
                    fund_benchmark: "",
                    fund_manage_profit: "",
                    fund_rate: "",
                    raise_account: ""
                },
                partProduct: {
                    id: "",
                    type: "",
                    product_name: "",
                    investment_period: "",
                    expected_earnings: "",
                    minimum_investment_amount: "",
                    income_return_type: ""
                },
                options: {
                    contract_type: dict.contract_type,
                    investment_period: dict.investment_period,
                    income_return_type: dict.income_return_type
                },
                dialog: {
                    fundLoading: false,
                    fundDialogVisible: false,
                    partLoading: false,
                    partDialogVisible: false,
                    formLabelWidth: '150px'
                }
            }
        },
        methods: {
            view() {
                if (this.productType != 4) {
                    this.$refs['partProduct'].validate((valid) => {
                        if (valid) {
                            this.dialog.partDialogVisible = true;
                        }
                    });
                }
                else if (this.productType == 4) {
                    this.$refs['fundProduct'].validate((valid) => {
                        if (valid) {
                            this.dialog.fundDialogVisible = true;
                        }
                    });
                }
                else {
                    this.$message.error("请选择产品类型并完成表单");
                }
            },
            cancel() {
                this.$router.push('../list');
            },
            formatInvestmentPeriod(val) {
                return this.options.investment_period[val];
            },
            formatIncomeReturnType(val) {
                return this.options.income_return_type[val];
            },
            loadProduct() {
                let params = {
                    id: this.$route.params.id
                };

                api.productInfo(params).then((res) => {
                    let result = JSON.parse(res.data.datas);
                    if (res.data.status == 200) {

                        this.productType = result.type;
                        if (this.productType != 4) {

                            result.expected_earnings = result.expected_earnings / 10000;
                            result.minimum_investment_amount = result.minimum_investment_amount / 100;
                            this.partProduct = result;
                        }
                        else {
                            this.fundProduct = result;
                        }


                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.status + " " + res.data.msg);
                    }
                });

            }
        },
        mounted() {
            this.$nextTick(function () {
                this.loadProduct(); //初始化页面数据
            });
        }

    }
</script>

<style scoped>

</style>